<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0 auto;}
			body{background-color:#F5F5F5;}
			table {
				width: 1226px;
				margin-top: 40px;
				background-color: white;

			
			}
			td{border-bottom: 2px solid #F5F5F5;}
			
			
			.title {
				border-bottom: 2px solid #FF6700;
			}
		
			.td2 {
				width: 430px;
				text-align: center;
			}
			
			.td3 {
				width: 120px;
				text-align: center;
			}
			
			.td4 {
				width: 220px;
				text-align: center;
			}
			
			.td5 {
				width: 230px;
				text-align: center;
			}
			.td6{padding-right: 30px;}
			tr{height: 120px;
			text-align: center;
			}
			.diyihang{font-size: 14px;
			height: 70px;}
			input{text-align: center;}
			.xia div{float: left;
			vertical-align: middle;
				background-color: white;
			}
			.xia{margin-left: 100px;
			height: 678px;}
			.jia{ 
			height: 300px;
			width: 230px;
			/*border: 1px solid;*/
		    margin-right: 15px;
		    margin-bottom: 15px;
			/*margin-top: 50px;*/
			position: relative;
			}
			.jia >p{text-align: center;
			font-size: 14px;
			line-height: 30px;}
			.oyuan{color: #ff6700;}
			.haoping{color: #757575;}
			.xiag{
				font-size: 12px;
				height:22px ;
			width: 120px;
			border: 1px  solid #ff6700;
			text-align: center;
			padding-top: 5px;
			position: absolute;
			top: 250px;
			left: 55px;
			display: none;
			}
			.xiag:hover{background-color: #FF6700;
			color: white;
			cursor: pointer;}
			.cha2{position: absolute;
			  top:50px  }
			  
			.mo1{position: absolute;
                left:470px ;	
                top: 150px;	
                height: 300px;
			width: 230px;
			/*border: 1px solid;*/
			background-color: white;
			} 
			#motaikuang p{text-align: center;
			font-size: 14px;
			margin: 5px;}
			#motaikuang .ershiwu{
				color: #FF6700;
			}
			#motaikuang  img{
				height: 160px;
				width: 160px;
				
			}
			#motaikuang .ggggg{
				width: 160px;
				height: 40px;
				background-color: #b0b0b0;
				color: white;
				text-align: center;
				line-height: 40px;
				font-size: 14px;
				position: absolute;
				top: 486px;
				left: 628px;
			}
			#motaikuang .ggggg:hover{
				background-color: #FF6700;
				cursor: pointer;
			}
			.mo1 .quan1{
				position: absolute;
				left: 15px;
				top: 15px;
				width: 20px;
				height: 20px;
				border: 1px solid #e0e0e0;
				border-radius: 50%;
				text-align: center;
			}
			
			
			.mo1 .quan2{
				 
				display: inline-block;
				background-color:#e0e0e0 ;
				width: 14px;
				height: 14px;
				margin-top: 3px;
				border-radius: 50%;
			}
			.mo2 .quan3{
				position: absolute;
				left: 15px;
				top: 15px;
				width: 20px;
				height: 20px;
				border: 1px solid #e0e0e0;
				border-radius: 50%;
				text-align: center;
			}
			.mo2 .quan4{
				 
				display: inline-block;
				background-color:#e0e0e0 ;
				width: 14px;
				height: 14px;
				margin-top: 3px;
				border-radius: 50%;
			}
			
			.mo2{position: absolute;
                left:710px ;	
                top: 150px;	
                height: 300px;
			width: 230px;
			/*border: 1px solid;*/
			background-color: white;
			} 
			
			
			/*#ff6700*/
			#motaikuang h3{
				position: absolute;
                left:650px ;	
                top: 70px;
                color: white;
                font-size: 28px;
			}
			 #motaikuang{
			 	text-align: center;			 	
				display: none;
				position: fixed;
				left: 0;
				top: 0;
				height: 100%;
			    width: 100%;
			    z-index: 1000;
			background-color: rgba(50,50,50,0.9);
			}
			#motaikuang #close{
				height: 25px;
				width: 25px;
				border-radius: 50%;
				background-color: white;
				position: absolute;
                right:130px ;	
                top: 80px;			
                cursor: pointer;
                color:gray ;
                text-align: center;
			}
			#motaikuang #close:hover{
			background-color: red;
			color: white;
				
			} 
			  
			.kuang{margin-left: 30px;}
			.kuang div{float: left;}  
		    .zeng{width: 40px;
		    height:30px ;
		    margin: 0;
		    border-bottom: 2px solid #E0E0E0;
		    border-left: 2px solid #E0E0E0;
		    border-top: 2px solid #E0E0E0;
		   padding-top: 10px;
		   cursor: pointer;
	
		    }
		    .zeng:hover{
		    	background-color: #E0E0E0;
		    }
		    .jian:hover{
		    	background-color: #E0E0E0;
		    }
		    .shu input{width: 70px;
		    height:  38px;
		    margin: 0;
		    border-left: 0px ;
		    border-right: 0px;
		    border-top: 2px solid #E0E0E0;
		    border-bottom: 2px solid #E0E0E0;
		    }
		    .jian{width: 40px;
		    height:30px ;
		    margin: 0;
		     border-bottom: 2px solid #E0E0E0;
		    border-right: 2px solid  #E0E0E0;
		    border-top: 2px  solid #E0E0E0;
		   padding-top: 10px;
		   cursor: pointer;
		    }
		   .cha{
		    		height: 25px;
				width: 25px;
				border-radius: 50%;
				background-color: white;
                cursor: pointer;
                color:gray ;
                margin-right: 50px;
		    }
		    .cha:hover{
			background-color: red;
			color: white;
			}
		   
		    span{width: 18px;
	  	           height: 18px;
	  	           border: 1px solid #E0E0E0;
	  	            display: block;
	  	            margin-left: 10px;}
	     	.gou{background-image: url(img/select.hover.png);}
		    .beijing{background-image: url(img/select.active.png);}

            .qu{width: 1226px;
             height: 50px;
             margin-top: 20px;
             /*border: 1px solid;*/
				background-color: white;
             }
             .qu li{float: left;
             text-align: center;
             list-style-type: none;
             line-height: 50px;
            /*border: 1px solid;*/ 
            }
             .ji{text-decoration: none;
             color: #757575;}
             .ji:hover{
             	color: #FF6700;
             }
             .zuo{font-size: 14px;
              color: #757575;
            }
              .you{margin-left: 400px;
              font-size: 14px;
              color: #FF6700;}
              .yuan{font-size: 14px;
              color: #FF6700;}
              #hj{width: 100px;
               color: #FF6700;
               font-size: 30px;
               font-weight: bold;}
              
              .qujiesuan{width: 220px;
              margin-left: 60px;
              font-size: 20px;
              background-color:#FF6700 ;
          
              }
              .qujiesuan a{
              	text-decoration: none;
              	    color: white;
              }
            .qujiesuan:hover{
            	background-color: orangered;
            }
             #mai {margin-left:100px}

		.erji  {
		width: 1226px;
		height: 50px;
		margin-left: 100px;
        padding-left: 10px;  
        margin-top: 10px;
        border-bottom: 2px solid #F5F5F5;
		/*border: 1px solid;*/
		font-size: 14px;
				background-color: white;
		
		}
		.erji:hover{background-color: #FAFAFA; cursor: pointer;}
		.fengshan:hover{background-color: #FAFAFA; cursor: pointer;}
		.fengshan img{
			cursor: pointer;
		}
		.erji img{
			cursor: pointer;
		}
		.fengshan{width: 1226px;
		height: 50px;
		margin-left: 100px;
        padding-left: 10px;  
    
		/*border: 1px solid;*/
		font-size: 14px;
				background-color: white;
			
		}
		
		   	/*<div class="erji">
			<a href=""><img src="img/jiahao.png"/></a>+25得小米活塞耳机 清新版 25元
		</div>
		<div class="fengshan">
			<a href=""><img src="img/jiahao.png"/></a>米家随身风扇 14.9元
		</div>
		*/
		.foot {
				width: 1423px;
				height: 272px;
				background-color: white;
			}
			.footer {
				width: 1226px;
				height: 272px;
				margin: 0 auto;
			}
			
			.foot .yuyue {
				border-bottom: 1px solid #e0e0e0;
				height: 60px;
				margin-bottom: 30px;
			}
			.foot .yuyue li {
				float: left;
				list-style-type: none;
				width: 19.8%;
				height: 25px;
				text-align: center;
				line-height: 25px;
				border-right: 1px solid #e0e0e0;
				margin-top: 10px;
			}
			
			.foot a {
				text-decoration: none;
				color: black;
			}
			.foot a:hover {
				color: #FF6700;
			}
			.foot .bangzhu dl {
				float: left;
				width: 160px;
				height: 112px;
			}
			
			.foot .bangzhu dt {
				font-size: 14px;
				margin: -1px 0 26px;
			}
			
			.foot .bangzhu dd {
				font-size: 12px;
				margin: 10px 0 0;
			}
			
			.foot .haoma {
				float: right;
				width: 252px;
				height: 130px;
				border-left: 1px solid #E0E0E0;
				text-align: center;
			}
			
			.foot .haoma .phone {
				margin-top: 0;
				font-size: 22px;
				color: #ff6700;
			}
			
			.foot .haoma .week {
				font-size: 12px;
				color: #616161;
			}
			
			.foot .haoma a {
				border: 1px solid #ff6700;
				background-color: #fff;
				color: #ff6700;
				width: 118px;
				height: 28px;
				font-size: 12px;
				line-height: 28px;
				display: inline-block;
			}
			
			.foot .haoma a:hover {
				background-color: #f25807;
				color: white;
			}
			
			.dibu .di2 a:hover {
				color: #FF6700;
			}
			
			.dibu {
				width: 1423px;
				height: 106px;
				background-color: #FAFAFA;
				font-size: 12px;
				padding: 30px 0;
			}
			
			.dibu .di1 {
				float: left;
				width: 57px;
				height: 57px;
				margin-right: 10px;
			}
			
			.dibu .di2 {
				float: left;
				color: #b0b0b0;
			}
			.dibu .di2 span {
				display: inline;
				border: 0;
			}
			.dibu .di2 a {
				color: #b0b0b0;
			}
			
			.dibu .di2 p {
				margin: 0;
			}
			
			.dibu .di33 {
				width: 1226px;
				height: 57px;
				margin: 0 auto;
			}
			
			.dibu .di3 {
				float: right;
			}
			
			.dibu .di3 img {
				width: auto;
				height: 28px;
				margin-left: 7px;
			}
			
			.dibu .kouhao {
				margin: 30px auto 0;
				text-align: center;
				height: 19px;
				font-size: 20px;
				color: #BABABA;
				font-family: "仿宋";
			}
		</style>
	</head>

	<body>
		<div class="title">
			<img src="img/head.png" />
		</div>
		<table id="ch" border="0" cellspacing="0" cellpadding="0">
         <thead>
			<tr class="diyihang">
				<td class="td1">
					<span id="a"></span>
					
					<!--<p><input type="checkbox" name="" id="a" value="" 
						ick="heji()"  />全选</p>-->
				</td>
				<td>全选</td>
                    
				<td class="td2">商品名称</td>
				<td class="td3">单价</td>
				<td class="td4">数量</td>
				<td class="td5">小计</td>
				<td class="td6">操作</td>

			</tr>
			</thead>
			<tbody>
			<tr>
				<td>
					<span onclick="cho()"></span>
					
					<!--<p><input type="checkbox" name="" id="" value="" onclick="heji()"  /></p>-->
				</td>
				<td><img src="img/yinxiang.png"/></td>
				<td>小米网络音箱</td>
				<td>349</td>
				<td >
					<div class="kuang">
					<div class="zeng" onclick="jianshuzi(this)">▬</div>
					<div class="shu"><input type="text" name=""  value="1" onchange ="xiaoji(this)"/></div>
				   <div class="jian" onclick="jiashuzi(this)" >✚</div>
				  </div>
				</td>
				
				<td>349</td>
				<td><p class="cha" onclick="del(this.parentNode.parentNode)">✖</p>
				
				</td>

			</tr>
			<tr>
				<td>
					<span onclick="cho()"></span>
					
					<!--<p><input type="checkbox" name="" id="" value="" onclick="heji()" /></p>-->
				</td>
				<td><img src="img/xidingdeng.png"/> </td>
					<td> 吸顶灯 白色</td>
				<td>379</td>
				<td><div class="kuang">
					<div class="zeng" onclick="jianshuzi(this)">▬</div>
					<div class="shu"><input type="text" name=""  value="1" onchange ="xiaoji(this)"/></div>
				   <div class="jian" onclick="jiashuzi(this)">✚</div>
				  </div></td>
				<td>379</td>
		
				<td><p class="cha" onclick="del(this.parentNode.parentNode)">✖</p></td>

			</tr>
			<tr>
				<td>
					<span onclick="cho()" ></span>
					
					<!--<p><input type="checkbox" name="" id="" value="" onclick="heji()" /></p>-->
				</td>
				<td><img src="img/lanya.png"/></td>
				
					<td>小米蓝牙音响 红色</td>
				<td>199</td>
				<td> <div class="kuang">
					<div class="zeng" onclick="jianshuzi(this)">▬</div>
					<div class="shu"><input type="text" name=""  value="1" onchange ="xiaoji(this)"/></div>
				   <div class="jian" onclick="jiashuzi(this)">✚</div>
				  </div></td>
				<td>199</td>
				<td><p class="cha" onclick="del(this.parentNode.parentNode)">✖</p></td>

			</tr>

			<tr>
				<td>
					<span onclick="cho()" ></span>
					
					<!--<p><input type="checkbox" name="" id="" value="" onclick="heji()" /></p>-->
				</td>
				<td><img src="img/shouhuan.png"/></td>
				
					<td>小米手环 2 黑色</td>
				<td>149</td>
				<td><div class="kuang">
					<div class="zeng" onclick="jianshuzi(this)"s>▬</div>
					<div class="shu"><input type="text" name=""  value="1" onchange ="xiaoji(this)"/></div>
				   <div class="jian" onclick="jiashuzi(this)">✚</div>
				  </div>
				</td>
				<td>149</td>
				<td><p class="cha" onclick="del(this.parentNode.parentNode)">✖</p></td>

			</tr>
			</tbody>
   <tfoot>
		
</tfoot>
		</table>
		<div class="erji" onclick="show()">
			<img src="img/jiahao2.png" /> +25得小米活塞耳机 清新版 25元
		</div>
		<div class="fengshan" onclick="show()">
		<img src="img/jiahao2.png" /> 米家随身风扇 14.9元
		</div>
		
		<div class="qu" >
			<ul>
				<li class="zuo"><a href="1" class="ji">继续购物</a></li>
				<li class="zuo">共4件商品，已选择4件</li>
				<li class="you">合计（不含运费）：</li>
				<li id="hj">
					0
				</li>
				<li class="yuan">元</li>
				<li class="qujiesuan">
					<a href="g">去结算</a>
				</li>
			</ul>
		</div>
		<img  id="mai"  src="img/mai.png"/>
		
		
		<div id="motaikuang" >
			<div id="close" onclick="closeit()">✖</div>
			<h3>选择产品</h3>
			
			<div class="mo1">
				<p class="quan1" onclick="bianhuang(this)">
					<label class="quan2"></label>
				</p>	
			<img src="img/yinse.png"  style="margin-top: 20px; margin-bottom: 27px;"/>
			<p>小米活塞耳机 清新版 银色</p>
			<p class="ershiwu">25元</p>
			
		</div>
		<div class="mo2">
			<p class="quan3" onclick="bianhuang(this)">
					<label class="quan4"></label>
				</p>
			<img src="img/fense.png"  style="margin-top: 20px; margin-bottom: 27px;"/>
			<p>小米活塞耳机 清新版 粉色</p>
			<p class="ershiwu">25元</p>
	
		</div>
			<div class="ggggg">加入购物车</div>
		</div>
		
		
		
		
		
		
		
		<div class="xia">
		<div class="jia">
			<p><img src="img/light.png"/></p>
			<p>床头灯</p>
			<p class="oyuan">249元</p>
			<p class="haoping">2.6万人好评</p>
			<div class="xiag" id="xiag1">加入购物车</div>
			
		</div>
		
		<div class="jia">
			<p><img src="img/cai.png"/ style="margin-top: 12px; margin-bottom: 18px;"></p>
			<p>彩虹7号电池（10粒装）</p>
			<p class="oyuan">9.9元</p>
			<p class="haoping">2.3万人好评</p>
			<div class="xiag">加入购物车</div>
			
		</div>
		`
		<div class="jia">
			<p><img src="img/cha.png"/  style="margin-top: 12px; margin-bottom: 26px;"></p>
			<p>小米插线板</p>
			<p class="oyuan">49元</p>
			<p class="haoping">1.6万人好评</p>
			<div class="xiag">加入购物车</div>
			
		</div>
		<div class="jia">
			<p><img src="img/fei.png"  style="margin-top: 20px; margin-bottom: 27px;"/></p>
			<p>飞利浦智睿吸顶灯</p>
			<p>349元</p>
			<p class="haoping">0.6万人好评</p>
			<div class="xiag">加入购物车</div>
			
		</div>
		<div class="jia">
			<p><img src="img/tai.png" style="margin-top: 20px; margin-bottom: 12px;"/></p>
			<p>米家 LED 智能台灯</p>
			<p class="oyuan">169元</p>
			<p class="haoping">1万人好评</p>
			<div class="xiag">加入购物车</div>
			
		</div>
		<div class="jia">
			<p><img src="img/light.png"/></p>
			<p>床头灯</p>
			<p class="oyuan">249元</p>
			<p class="haoping">2.6万人好评</p>
			<div class="xiag" id="xiag1">加入购物车</div>
			
		</div>
		
		<div class="jia">
			<p><img src="img/cai.png"/ style="margin-top: 12px; margin-bottom: 18px;"></p>
			<p>彩虹7号电池（10粒装）</p>
			<p class="oyuan">9.9元</p>
			<p class="haoping">2.3万人好评</p>
			<div class="xiag">加入购物车</div>
			
		</div>
		`
		<div class="jia">
			<p><img src="img/cha.png"/  style="margin-top: 12px; margin-bottom: 26px;"></p>
			<p>小米插线板</p>
			<p class="oyuan">49元</p>
			<p class="haoping">1.6万人好评</p>
			<div class="xiag">加入购物车</div>
			
		</div>
		<div class="jia">
			<p><img src="img/fei.png"  style="margin-top: 20px; margin-bottom: 27px;"/></p>
			<p>飞利浦智睿吸顶灯</p>
			<p>349元</p>
			<p class="haoping">0.6万人好评</p>
			<div class="xiag">加入购物车</div>
			
		</div>
		<div class="jia">
			<p><img src="img/tai.png" style="margin-top: 20px; margin-bottom: 12px;"/></p>
			<p>米家 LED 智能台灯</p>
			<p class="oyuan">169元</p>
			<p class="haoping">1万人好评</p>
			<div class="xiag">加入购物车</div>
			
		</div>
		</div>
		
	<div class="foot">
			<div class="footer">
				<div class="yuyue">
					<ul>
						<li>
							<a href="index.html">预约维修服务</a>
						</li>
						<li>
							<a href="">7天无理由退货</a>
						</li>
						<li>
							<a href="">15天免费换货</a>
						</li>
						<li>
							<a href="">满150元包邮</a>
						</li>
						<li>
							<a href="">520余家售后网点</a>
						</li>
					</ul>
				</div>
				<div class="bangzhu">
					<dl>
						<dt>帮助中心</dt>
						<dd>
							<a href="">账户管理</a>
						</dd>
						<dd>
							<a href="">购物指南</a>
						</dd>
						<dd>
							<a href="">订单操作</a>
						</dd>
					</dl>
					<dl>
						<dt>服务支持</dt>
						<dd>
							<a href="">售后政策</a>
						</dd>
						<dd>
							<a href="">自助服务</a>
						</dd>
						<dd>
							<a href="">相关下载</a>
						</dd>
					</dl>
					<dl>
						<dt>线下门店</dt>
						<dd>
							<a href="">小米之家</a>
						</dd>
						<dd>
							<a href="">服务网点</a>
						</dd>
						<dd>
							<a href="">零售网点</a>
						</dd>
					</dl>
					<dl>
						<dt>关于小米</dt>
						<dd>
							<a href="">了解小米</a>
						</dd>
						<dd>
							<a href="">加入小米</a>
						</dd>
						<dd>
							<a href="">联系我们</a>
						</dd>
					</dl>
					<dl>
						<dt>关注我们</dt>
						<dd>
							<a href="">新浪微博</a>
						</dd>
						<dd>
							<a href="">小米部落</a>
						</dd>
						<dd>
							<a href="">官方微信</a>
						</dd>
					</dl>
					<dl>
						<dt>特色服务</dt>
						<dd>
							<a href="">F码通道</a>
						</dd>
						<dd>
							<a href="">礼物码</a>
						</dd>
						<dd>
							<a href="">防伪查询</a>
						</dd>
					</dl>
					<div class="haoma">
						<p class="phone">400-100-5678</p>
						<p class="week">
							周一至周日 8:00-18:00<br /> （仅收市话费）
						</p>
						<a href=""> 24小时在线客服</a>
					</div>
				</div>
			</div>
			<div class="dibu">
				<div class="di33">
					<div class="di1">
						<img src="img/milogo.png" />
					</div>
					<div class="di2">
						<p>
							<a href="">小米商城</a>
							<span>|</span>
							<a href="">MIUI</a>
							<span>|</span>
							<a href="">米聊</a>
							<span>|</span>
							<a href="">多看书城</a>
							<span>|</span>
							<a href="">小米路由器</a>
							<span>|</span>
							<a href="">视频电话</a>
							<span>|</span>
							<a href="">小米天猫店</a>
							<span>|</span>
							<a href="">小米淘宝直营店</a>
							<span>|</span>
							<a href="">小米网盟</a>
							<span>|</span>
							<a href="">小米移动</a>
							<span>|</span>
							<a href="">隐私政策</a>
							<span>|</span>
							<a href="">Select Region</a>
						</p>
						<p>
							@
							<a href="#">mi.com</a>京ICP证110507号
							<a href="">京ICP备10046444号</a>
							<a href="">京公网安备11010802020134号 </a>
							<a href="">京网文[2014]0059-0009号</a><br /> 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
						</p>
					</div>
					<div class="di3">

						<a href=""><img src="img/zuihou1.png" /></a>
						<a href=""><img src="img/zuihou2.png" /></a>
						<a href=""><img src="img/zuihou3.png" /></a>
						<a href=""><img src="img/zuihou4.png" /></a>
					</div>
				</div>
				<div class="kouhao">
					探索黑科技，小米为发烧而生!
				</div>
			</div>
		</div>
		
		
		
		
		
		
		
		<script type="text/javascript">
			function bianhuang(t){
				t.style.color="#FF6700";
				t.children[0].style.color="#FF6700";
			}
//			document.getElementById("a").onclick = function() {
//				var tab = document.getElementById("ch");
//				var inputs = tab.getElementsByTagName("input");
//
//				for(var i = 0; i < inputs.length; i++) {
//					inputs[i].checked = this.checked;
//
//				}
//			}
		var jia=document.getElementsByClassName("jia")
		var hov=document.getElementsByClassName("xiag")
			for (var i = 0; i < jia.length; i++) {
				jia[i].onmouseover=function(){				  
				  	this.children[4].style.display="block"				  					  
				}
				jia[i].onmouseout=function(){				  
				  	this.children[4].style.display="none"				  					  
				}
				
			}
			
			
			
			function xiaoji(t){
	
		        var tr=t.parentNode.parentNode.parentNode.parentNode;
                var dj=tr.children[3].innerHTML
                var num=t.value;
                var sum= dj*num;
//            console.log(tr);
                tr.children[5].innerHTML=sum;
                heji()
				}
			
		
			var add=document.getElementById("xiag1");
			console.log(add)
			add.onclick=function(){
				var tab=document.getElementById("ch")
				var tr=document.createElement("tr");
				tr.innerHTML="<td> <span onclick='cho()'></span> </td>"
				tr.innerHTML+="<td><img src='img/chaung.png'></td>"
				tr.innerHTML+="<td>床头灯  </td>"
				tr.innerHTML+="<td>249 </td>"
				tr.innerHTML+='<td><div class="kuang"><div class="zeng" onclick="jianshuzi(this)">▬</div><div class="shu"><input type="text" name=""  value="1" onchange ="xiaoji(this)"/></div><div class="jian" onclick="jiashuzi(this)">✚</div></div></td>'
				tr.innerHTML+="<td> 249 </td>"
				tr.innerHTML+="<td><p class='cha' onclick='del(this.parentNode.parentNode)'>✖</p></td>"
				tab.children[1].appendChild(tr)
				cho();
				heji();
			}
			
			
		     cho()
		   
			
			function cho(){
//  全选			
			var spans=document.querySelectorAll("span")
//		console.log(spans)
		for (var i = 0; i < spans.length; i++) {
			spans[i].onmouseover=function(){
				if (this.className!="beijing") {
						this.className="gou"
				}
			
			}
		}
		
		for (var i = 0; i < spans.length; i++) {
			spans[i].onmouseout=function(){
				if (this.className!="beijing") {
						this.className=""
				}
			
			}
		}
		for (var i = 0; i < spans.length; i++) {
			spans[i].onclick=function(){
				if (this.className!="beijing") {
					this.className="beijing";
				}else{
				this.className=""}
				
			}
		}
		
		}
		document.getElementById("a").onclick = function() {
			var trs=document.getElementsByTagName("tr")
			if(this.className != "beijing") {
					this.className = "beijing";
				} else {
					this.className = "";
				}
				if(this.className == "beijing") {
					for(var i = 0; i < trs.length; i++) {
						trs[i].firstElementChild.firstElementChild.className = "beijing";
						heji();
					}
				} else {
					for(var i = 0; i < trs.length; i++) {
						trs[i].firstElementChild.firstElementChild.className = "";
						heji();
					}
				}
			
//			
//			for (var i = 0; i < spans.length; i++) {
//            if (a.className!="") {
//            	spans[i].className=""
//				}else{spans[i].className="beijing";
//           
//				}
//				
//			}
		}
		
		     	function heji(){
				var tab=document.getElementById("ch");
				var tr=tab.children[1].children
				var sum=0
				
				for (var i = 0; i < tr.length; i++) {
					var choose = tr[i].firstElementChild.firstElementChild;
					if(choose.className == "beijing"){
					sum += parseFloat(tr[i].children[5].innerHTML)
					
					}
				}
				document.getElementById("hj").innerHTML=sum;

			}
				
			
                function del(tr) {
                	var tab=document.getElementById("ch");
				if(confirm("是否确认删除?")) {
					tab.children[1].removeChild(tr);
					heji()
				}
			}
                
			function jiashuzi(t){
				var shu=t.parentNode.children[1].firstElementChild;
				shu.value=parseFloat(shu.value)+1;
				
				  var tr=t.parentNode.parentNode.parentNode;
				  var dj=tr.children[3].innerHTML
                var sum= dj*shu.value;
                  tr.children[5].innerHTML=sum;
                  heji()
//				  console.log(sum)
               
				}
	        function jianshuzi(t){
	        	var shu=t.parentNode.children[1].firstElementChild;
	        	if(shu.value<=1){0;}
	        	else{shu.value=parseFloat(shu.value)-1;}
	        	
	        	  var tr=t.parentNode.parentNode.parentNode;
				  var dj=tr.children[3].innerHTML
                var sum= dj*shu.value;
                  tr.children[5].innerHTML=sum;
	        }
	        	 
	        	function show(){
				document.getElementById("motaikuang").style.display="block";
			}
			function closeit(){
				document.getElementById("motaikuang").style.display="none";
			}
		</script>
	</body>

</html>